import React, { useCallback, useEffect } from "react";
import { View, Text, Image } from "@tarojs/components";
import { Cell, Button } from "@nutui/nutui-react-taro";
import Layout from "@/components/Layout";
import Taro from "@tarojs/taro";
import { useTranslation } from "react-i18next";
import { useLanguageStore } from "@/stores/language";
import { useThemeStore } from "@/stores/theme";
import { useEnv, useNavigationBar, useModal, useToast } from "taro-hooks";
import { useCounterStore } from "../../stores/counter";
import { useUserStore } from "../../stores/user";
import logo from "./hook.png";
import "./index.scss";

const Index = () => {
  const { t } = useTranslation();
  const { count, increment, decrement, reset } = useCounterStore();
  const { currentLanguage, changeLanguage } = useLanguageStore();
  const { currentTheme, changeTheme } = useThemeStore();
  // 监听计数变化
  useEffect(() => {
    console.log("当前计数：", count);
  }, [count]);

  const env = useEnv();
  const { setTitle } = useNavigationBar({ title: "Taro Hooks" });
  const showModal = useModal({
    title: "Taro Hooks Canary!",
    showCancel: false,
    confirmColor: "#8c2de9",
    confirmText: "支持一下",
  });
  const { show } = useToast({ mask: true });

  const handleModal = useCallback(() => {
    showModal({ content: "不如给一个star⭐️!" }).then(() => {
      show({ title: "点击了支持!" });
    });
  }, [show, showModal]);

  const { login } = useUserStore();
  const handleLogin = useCallback(async () => {
    try {
      await login("admin", "123456");
      show({ title: "登录成功!" });
    } catch (error) {
      show({ title: error.message || "登录失败" });
    }
  }, [login, show]);

  const handleGoToAbout = () => {
    Taro.navigateTo({
      url: "/pages/subPackages/about/index",
    });
  };

  return (
    <Layout>
      <View className="wrapper">
        <Image className="logo" src={logo} />
        <Text className="title">为Taro而设计的Hooks Library</Text>
        <Text className="desc">
          目前覆盖70%官方API. 抹平部分API在H5端短板. 提供近40+Hooks! combined
          with ahook adapter Taro! More information can be viewed in the new
          version: https://next-version-taro-hooks.vercel.app/
        </Text>
        <View className="list">
          <Text className="label">运行环境</Text>
          <Text className="note">{env}</Text>
        </View>
        <Button className="button" onClick={() => setTitle("Taro Hooks Nice!")}>
          设置标题
        </Button>
        <Button className="button" onClick={handleModal}>
          使用Modal
        </Button>
        <Button type="primary">primary</Button>
        <Cell title="我是标题" extra="描述文字" />
        <View className="flex flex-col items-center p-4 bg-blue-100 rounded-lg shadow-md">
          <Text className="text-xl font-bold text-blue-600 w-100px">
            Tailwind 测试
          </Text>
        </View>

        {/* 计数器测试 */}
        <View style={{ marginTop: "20px", textAlign: "center" }}>
          <Text style={{ fontSize: "24px", marginBottom: "10px" }}>
            计数器: {count}
          </Text>
          <View
            style={{ display: "flex", justifyContent: "center", gap: "10px" }}
          >
            <Button type="primary" onClick={increment}>
              +1
            </Button>
            <Button type="primary" onClick={decrement}>
              -1
            </Button>
            <Button onClick={reset}>重置</Button>
          </View>
          <Button type="primary" onClick={handleLogin}>
            {t("home.login")}
          </Button>
        </View>
        <Button onClick={() => changeLanguage("zh-CN")}>切换到中文</Button>
        <Button onClick={() => changeLanguage("en-US")}>
          Switch to English
        </Button>
        <Text>当前语言：{currentLanguage}</Text>
        <View>
          <Button onClick={() => changeTheme("light")}>浅色主题</Button>
          <Button onClick={() => changeTheme("dark")}>暗色主题</Button>
          <Button onClick={() => changeTheme("pink")}>粉色主题</Button>
        </View>
        <View className="bg-background text-text border-border">
          <Text className="text-primary">这是主要文本</Text>
          <Text className="text-secondary">这是次要文本</Text>
        </View>
        <Button type="primary" onClick={handleGoToAbout}>
          关于我们
        </Button>
      </View>
    </Layout>
  );
};

export default Index;
